<template>
  <div class="main">

    <el-table
      v-loading="loading"
      :data="orders"
      style="width: 100%"
      height="600">
      <el-table-column type="expand">
        <template slot-scope="props">
          <el-form label-position="left" inline class="demo-table-expand">
            <el-form-item label="订单ID：">
              <span slot="label">
                <span class="span-box">
                  <i class="el-icon-shopping-bag-2"></i>
                  <span>订单ID:</span>
                </span>
              </span>
              <span>{{ props.row.order.id }}</span>
            </el-form-item>
            <el-form-item label="场次ID：">
               <span slot="label">
                <span class="span-box">
                  <i class="el-icon-date"></i>
                  <span>场次ID:</span>
                </span>
              </span>
              <span>{{ props.row.arrangement.id }}</span>
            </el-form-item>
            <el-form-item label="用户ID：">
                <span slot="label">
                <span class="span-box">
                  <i class="el-icon-user-solid"></i>
                  <span>用户ID:</span>
                </span>
              </span>
              <span>{{ props.row.user.id }}</span>
            </el-form-item>
            <el-form-item label="电影ID：">
              <span slot="label">
                <span class="span-box">
                  <i class="el-icon-video-camera-solid"></i>
                  <span>电影ID:</span>
                </span>
              </span>
              <span>{{ props.row.film.id }}</span>
            </el-form-item>
            <el-form-item label="电影名：">
               <span slot="label">
                <span class="span-box">
                  <i class="el-icon-video-camera"></i>
                  <span>电影名:</span>
                </span>
              </span>
              <span>《 {{ props.row.film.name }} 》</span>
            </el-form-item>
            <el-form-item label="座位号：">
              <span slot="label">
                <span class="span-box">
                  <i class="el-icon-menu"></i>
                  <span>座位号:</span>
                </span>
              </span>
              <span>{{ props.row.order.seats }}</span>
            </el-form-item>
            <el-form-item label="订单金额：">
                <span slot="label">
                <span class="span-box">
                  <i class="el-icon-shopping-cart-full"></i>
                  <span>订单金额:</span>
                </span>
              </span>
              <span>{{ props.row.order.price }}</span>
              <span> /元</span>
            </el-form-item>
            <el-form-item label="下单时间：">
               <span slot="label">
                <span class="span-box">
                  <i class="el-icon-time"></i>
                  <span>下单时间:</span>
                </span>
              </span>
              <span>{{ props.row.order.createTime }}</span>
            </el-form-item>
            <el-form-item label="支付时间：">
              <span slot="label">
                <span class="span-box">
                  <i class="el-icon-time"></i>
                  <span>支付时间:</span>
                </span>
              </span>
              <span>{{ props.row.order.payTime }}</span>
            </el-form-item>
          </el-form>
        </template>
      </el-table-column>
      <el-table-column
        label="订单 ID"
        width="400"
        prop="order.id">
      </el-table-column>
      <el-table-column
        width="200"
        label="电影名"
        prop="film.name">
      </el-table-column>
      <el-table-column
        width="200"
        label="订购座位"
        prop="order.seats">
      </el-table-column>
      <el-table-column
        width="200"
        label="订单金额"
        prop="order.price"
        sortable>
      </el-table-column>
      <el-table-column label="订单状态" prop="order.status" sortable>
        <template slot-scope="scope">
          <el-tag v-if="scope.row.order.status === 2" type="success">支付成功</el-tag>
          <el-tag v-if="scope.row.order.status === 0" type="info">等待支付</el-tag>
          <el-tag v-if="scope.row.order.status === 3" type="warning">已被撤销</el-tag>
          <el-tag v-if="scope.row.order.status === 1" type="danger">支付失败</el-tag>
        </template>
      </el-table-column>
    </el-table>

  </div>
</template>

<script>
  import {CreateOrderException, FindAllOrder, UpdateOrder} from "@/api/order";

  export default {

    data() {
      return {
        loading: false,
        orders: [],
      }
    },

    mounted() {
      this.loadOrderList()
    },

    methods: {

      loadOrderList() {
        this.loading = true
        FindAllOrder().then(res => {
          if (res.success) {
            setTimeout(() => {
              this.orders = res.data
              this.loading = false
            }, 200)
          }
        })
      },

    }

  }
</script>

<style scoped>
  .main {
    padding: 30px;
  }

  .demo-table-expand {
    font-size: 0;
  }

  .demo-table-expand label {
    width: 90px;
    color: #99a9bf;
  }

  .demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
  }
</style>
